<template>
  <div>
    <el-card shadow='never'>
      <div slot='header'>
        <span style='font-size: 18px; font-weight: 700; line-height: 32px'>机构信息</span>
      </div>
      <!-- 表单 -->
      <el-form
        ref='form'
        :model='form'
        :rules='rules'
        label-width='120px'
      >
        <el-form-item
          label='中心名称'
          prop='name'
        >
          <el-input
            v-model='form.name'
            style='width: 50%'
          ></el-input>
        </el-form-item>
        <el-form-item
          label='中心编号'
          prop='id'
        >
          <el-input
            v-model='form.id'
            style='width: 50%'
          ></el-input>
        </el-form-item>
        <el-form-item
          label='中心介绍'
          prop='introduce'
        >
          <el-input
            v-model='form.introduce'
            style='width: 50%'
          ></el-input>
        </el-form-item>
        <el-form-item
          label='通信地址'
          prop='address'
        >
          <el-input
            v-model='form.address'
            style='width: 50%'
          ></el-input>
        </el-form-item>
        <el-form-item
          label='电子邮箱'
          prop='email'
        >
          <el-input
            v-model='form.email'
            style='width: 50%'
          ></el-input>
        </el-form-item>
        <el-form-item
          label="机构资质"
          prop='certification'
        >
          <el-input
            type="textarea"
            v-model="form.certification"
            style='width: 50%'
            :autosize="{ minRows: 3, maxRows: 6}"
          ></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <input
            type='file'
            ref="pathClear"
            @change='uploadFn'
            style='width: 50%'
          />
          <el-button
            style="margin-left: 10px;"
            size="small"
            icon="el-icon-plus"
            type="danger"
            @click="submitUpload"
          >添 加</el-button>
        </el-form-item>
        <el-form-item>
          <!-- <el-button type='primary' @click='onSubmit'>保存</el-button> -->
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getUploadListAPI } from '@/api/backStage.js';
export default {
    name: 'organizationInfo',
    data() {
        return {
            formData: null,
            ip: '',
            form: JSON.parse(localStorage.getItem('organization')) || {
                name: '', // 中心名称
                id: '', // 中心编号
                introduce: '', //中间介绍
                address: '', // 通信地址
                email: '', // 电子邮箱
                certification: '' // 机构资质
            },
            rules: {
                name: [{ required: true, message: '中心名称不能为空', trigger: 'blur' }],
                id: [{ required: true, message: '中心编号不能为空', trigger: 'blur' }],
                introduce: [{ required: true, message: '中心编号不能为空', trigger: 'blur' }],
                address: [{ required: true, message: '通信地址不能为空', trigger: 'blur' }],
                email: [
                    { required: true, message: '电子邮箱不能为空', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                certification: [{ required: true, message: '机构资质不能为空', trigger: 'blur' }]
            }
        };
    },
    methods: {
        // 获取ip
        ready() {
            let cip = returnCitySN['cip'];
            let cid = returnCitySN['cid'];
            let cname = returnCitySN['cname'];
            this.ip = cip;
        },
        uploadFn(event) {
            this.formData = null;
            let file = event.target.files[0];
            let size = Math.floor(file.size / 1024); //计算文件的大小
            this.formData = new FormData(); //new一个formData事件
            this.formData.append('file', file); //将file属性添加到formData里
            //此时formData就是我们要向后台传的参数了
        },
        // 提交上传
        async submitUpload() {
            const res = await getUploadListAPI({
                token: this.$store.state.user.token,
                lx: '12',
                OprID: this.$store.state.user.oprid,
                ip: this.ip,
                ImportFile: this.formData
            });
            if (res.code == 'succ') {
                this.$message.success('上传' + res.message);
                // 上传成功之后清除input框file的值
                this.$refs.pathClear.value = '';
            } else {
                this.$message.error(res.message);
            }
        }
    }
};
</script>

<style scoped>
</style>
